<template>
  <div>柱状图显示
    <br><br>
    <div class="barBG"
         id="echart"
         ref="mychart">
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'barTest',
  data () {
    return {
      myChart: {},
      option: {
        dataset: {
          dimensions: ['product', '来访人数', '签约人数'],
          source: [
            { product: '2/3', '来访人数': 43.3, '签约人数': 85.8 },
            { product: '2/4', '来访人数': 83.1, '签约人数': 73.4 },
            { product: '2/5', '来访人数': 186.4, '签约人数': 65.2 },
            { product: '2/6', '来访人数': 72.4, '签约人数': 53.9 },
            { product: '2/7', '来访人数': 72.4, '签约人数': 53.9 }
          ]
        },
        color: ['red', 'yellow'],
        title: {
          text: '每周来访人数和签约人数统计',
          // 标题样式
          textStyle: {
            color: '#fff',
            fontSize: 10
          },
          top: 10,
          // subtext: '单位（户）',
          // 副标题样式
          subtextStyle: {
            color: '#939daa',
            fontSize: 10
          }
        },
        // 图例组件
        legend: {
          data: ['来访人数', '签约人数'], // 对应series中对象的name属性，自动生成图例组件
          right: 0, // 设置图例的位置，上下左右，
          top: 50,
          itemWidth: 10,
          itemHeight: 10,
          // 图例样式
          textStyle: {
            color: '#939daa', // 图例文字颜色
            fontSize: 10
          },
          selectedMode: false, // 控制是否可以通过点击图例改变系列的显示状态
          orient: 'vertical'
        },
        grid: {
          // top: 100,
          left: 50
        },
        // x轴设置
        xAxis: {
          type: 'category', // 样式类型
          // 坐标轴刻度相关设置
          axisTick: {
            show: false, // 刻度是否显示
            // 刻度样式
            lineStyle: {
              color: '#fff'
            },
            alignWithLabel: true,
            interval: (index, value) => {
              return index * 46 + 46
            }
          },
          // x轴线相关配置
          axisLine: {
            show: false // x轴线是否显示
          },
          // 刻度标签的相关设置
          axisLabel: {
            show: true,
            textStyle: {
              color: '#939daa', // x轴文字颜色设置
              fontSize: 10
            }
            // rotate: 45
            // interval: '46'
          },
          nameGap: 6,
          nameTextStyle: {
            color: '##FD4041'
          }
          // max: function (value) {
          //   return (value.max = alength)
          // }
        },
        // y轴设置
        yAxis: {
          // max: 'dataMax', // 坐标轴刻度最大值
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#939daa', // y轴文字颜色设置
              fontSize: 10
            }
          },
          splitLine: { show: false } // 去除网格线
        },
        series: [
          { type: 'bar', barWidth: 15 },
          { type: 'bar', barWidth: 15 }
        ],
        // 数据加载时长
        animationDuration: function (idx) {
          return 3000
          // 越往后的数据延迟越大
          // return idx * 1000
        }
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.setEchart()
    })
  },
  methods: {
    // 创建实例并生成表格
    setEchart () {
      this.myChart = echarts.init(this.$refs.mychart) // 创建实例
      this.myChart.clear()
      this.myChart.setOption(this.option) // 生成图表
    }
  },
  destroyed () {
  }
}
</script>

<style lang='scss' scoped>
.barBG {
  width: 600px;
  height: 600px;
}
</style>
